<template>
  <main>
    <div class="top-container" v-show="(userInfo.shopCars.length > 0) ? true : false">
      <div class="top-container-left">
        <div class="left-title">
          <img style="cursor: pointer" src="/src/assets/shopCarImg.png" @click="toPage('/','')" title="单击返回主页">
          <h4 style="margin-top: 2px">全部商品</h4>
        </div>
        <div class="left-low">
          <label style="width: 80px;height: 30px;display: flex;align-items: center;"><input type="checkbox" class="inCheck" id="allCheck" @click="allChoice"> 全选</label>
          <button class="low-bt" @click="delItem(false)">删除</button>
        </div>
      </div>
      <div class="top-container-right">
        <div class="right-title">
          <h3>结算明细</h3>
        </div>
        <div class="right-container">
          <div style="width: 100%;min-height: 200px;display:flex;flex-wrap: wrap;gap: 10px;"  v-show="(waitDelId.info.length > 0) ? true : false">
            <div class="entail-img" style="width: 80px;height: 80px; position: relative;" v-for="data in waitDelId.info">
              <img style="width: 95%;height: 95%;border-radius: 10px;" :src="data.detail.url">
              <p class="emtail-img-p"  @click="choiceOne(data.detail,true)">取消选择</p>
            </div>
          </div>
          <img style="width: 100%;height: 200px;" src="/src/assets/carNone.png" v-show="(waitDelId.info.length > 0) ? false : true">
        </div>
        <div class="right-bt">
          <div class="bt-ti" style="display: flex;justify-content: space-between;">
            <h3>合计:</h3>
            <h3 style="color: #FF5000">${{prepCarList.sumMoney}}</h3>
          </div>
          <button class="top-button" @click="buyGoods">结算</button>
        </div>
      </div>
    </div>

    <div class="mid-container" v-show="(userInfo.shopCars.length > 0) ? true : false">

      <div class="goodsList" v-for="data in userInfo.shopCars" :key="data.id" >
        <input type="checkbox" class="inCheck" style="margin-right: 10px" :id="'check' + data.id" @click="choiceOne(data,false)">
        <div class="goodsImg" @click="toPage('goods-info',data)">
          <img :src="data.url" style="width: 100%;height: 100%;object-fit: contain;">
        </div>
        <div class="goodsInfo">
          <div class="goodsInfo-top" @click="toPage('goods-info',data)">
              <p style="overflow: hidden;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;text-overflow: ellipsis;">{{data.info}}</p>
          </div>
          <div class="goodsInfo-mid">
            <p>信用卡支付</p>
          </div>
          <div class="goodsInfo-bt">
            <p >7天无理由退货 极速退款</p>
          </div>
        </div>
        <div class="goodsPrice">
          <div class="goodsPrice-con">
            <p >${{data.price}} 优惠价</p>
            <p style="color: #737373">$300000</p>
          </div>
        </div>
        <div class="goodsNum">
          <div style="display: flex;">
            <a href="#" class="label2" style="border-radius: 20% 0 0 20%" @click="addNum(data.id,-1)">-</a>
            <p class="label2" style="width: 50px;border: 0;border-bottom: 1px #bebcbc solid;border-top: 1px #bebcbc solid;">{{data.num}}</p>
            <a href="#" class="label2" style="border-radius: 0 20% 20% 0" @click="addNum(data.id,1)">+</a>
          </div>
        </div>
      </div>
    </div>

    <div style="width: 100%;height: 100%;" v-show="(userInfo.shopCars.length > 0) ? false : true">
      <div class="other">
        <img src="/src/assets/shopCarNoAny.png">
      </div>
      <div style="margin-top: 20px">
        <button class="top-button" style="height: 70px;width: 200px" @click="router.push('/')">去逛逛</button>
      </div>
    </div>
  </main>
</template>

<script setup>
import {reactive, ref} from 'vue';

import {useRouter} from "vue-router";

import { ElMessageBox ,ElMessage} from 'element-plus'

import useUserInfoStore from "../stores/user.js";
import { storeToRefs } from "pinia";
import router from "../router/index.js";
const userInfoStore = useUserInfoStore();
const { userInfo} = storeToRefs(userInfoStore);

  const prepCarList = reactive({
    info:[],
    sumMoney:0
  });
  const waitDelId = reactive({
    info:[]
  })

  const allChoice = () => {
    let checkbox = document.getElementById('allCheck');
    for(let i = 0;i < userInfo.value.shopCars.length;i ++){
      let tmpCheckbox = document.getElementById('check' + userInfo.value.shopCars[i].id);
      tmpCheckbox.checked = false;
      prepCarList.info = prepCarList.info.filter(item => item.id !== userInfo.value.shopCars[i].id);
      prepCarList.sumMoney = 0;
      waitDelId.info = waitDelId.info.filter(item => item.id !== userInfo.value.shopCars[i].id);
    }
    if(checkbox.checked){
      for(let i = 0;i < userInfo.value.shopCars.length;i ++){
        let tmpCheckbox = document.getElementById('check' + userInfo.value.shopCars[i].id);
        tmpCheckbox.checked = true;
        prepCarList.info.push(userInfo.value.shopCars[i]);
        prepCarList.sumMoney += (userInfo.value.shopCars[i].num * userInfo.value.shopCars[i].price)
        waitDelId.info.push({
          id:userInfo.value.shopCars[i].id,
          detail:userInfo.value.shopCars[i]
        });
      }
    }
    console.log("all",prepCarList)
  }

  const choiceOne = (data,op) => {
    let checkbox = document.getElementById('check' + data.id);
    if(op)checkbox.checked = !checkbox.checked;
    if(checkbox.checked){
      prepCarList.info.push(data);
      prepCarList.sumMoney += (data.num * data.price)
      waitDelId.info.push({
        id:data.id,
        detail:data
      })
      if(waitDelId.info.length == userInfo.value.shopCars.length){
      okAllchen();
      }
    } else {
      let checkbox3 = document.getElementById('allCheck');
      checkbox3.checked = false;
      prepCarList.info = prepCarList.info.filter(item => item.id !== data.id);
      prepCarList.sumMoney -= (data.num * data.price)
      waitDelId.info = waitDelId.info.filter(item => item.id !== data.id);
    }
  }
  const delItem = (flag) =>{
    if(flag){
      prepCarList.sumMoney = 0;
      cancelAllChe();
      for(let i = 0;i < waitDelId.info.length;i ++){
        prepCarList.info = prepCarList.info.filter(item => item.id !== waitDelId.info[i].id);
        userInfo.value.shopCars = userInfo.value.shopCars.filter(item => item.id !== waitDelId.info[i].id);
      }
      return ;
    }

    ElMessageBox.confirm(
        '确定要删除宝贝吗？',
        '通知',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
      ElMessage({
        type: 'success',
        message: "已删除",
      })
      prepCarList.sumMoney = 0;
      cancelAllChe();
      for(let i = 0;i < waitDelId.info.length;i ++){
        prepCarList.info = prepCarList.info.filter(item => item.id !== waitDelId.info[i].id);
        userInfo.value.shopCars = userInfo.value.shopCars.filter(item => item.id !== waitDelId.info[i].id);
      }
      waitDelId.info = []
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })

  }

  const addNum = (id,t) => {
    for (let i = 0;i < userInfo.value.shopCars.length;i ++){
      if(userInfo.value.shopCars[i].id == id){
        if(userInfo.value.shopCars[i].num == 1 && t == -1)break;
        for(let j = 0;j < prepCarList.info.length;j ++){
          if(prepCarList.info.id == id)prepCarList.info.num = prepCarList.info.num + t;
        }
        let checkbox = document.getElementById('check' + id);
        if(checkbox.checked)prepCarList.sumMoney += (userInfo.value.shopCars[i].price * t);
        // console.log(userInfo.value.shopCars[i].num)
        userInfo.value.shopCars[i].num = userInfo.value.shopCars[i].num + t;
        break;
      }
    }
  };

  const buyGoods = () => {
    ElMessageBox.confirm(
        '确认是否购买？',
        '通知',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
      ElMessage({
        type: 'success',
        message: "购买成功！\n一共花费：" + prepCarList.sumMoney,
      })
      delItem(true);
      waitDelId.info = [];
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消订单！',
      })
    })

  }
  const okAllchen = () => {
    let checkbox = document.getElementById('allCheck');
    checkbox.checked = true;
  }
  const cancelAllChe = () =>{
    let checkbox = document.getElementById('allCheck');
    checkbox.checked = false;
  }
  const toPage = (url,data) => {

    router.push({
      path:url,
      query:data
    });
  }

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
main {
  width: 100%;
  height: 100vh;
  justify-items: center;
  background-color: white;
  box-sizing: border-box;
}
.top-container {
  width: 100%;
  height: 100px;
  min-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  display: flex;
  position: sticky;
  top: 0;
  padding-top: 20px;
  background-color: white;
  z-index: 2;
}
.top-container-left{
  width: 69%;
  height: 120px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.left-title{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 50%;

}
.left-low {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50%;
}
.low-bt {
  width: 80px;
  height: 30px;
  border: 1px solid #d4d4d5;
}
button:focus {
  outline: none;
}
.low-bt:hover {
  background-color: #c8c8c9;
}

.inCheck{

  width: 20px;
  height: 20px;
  border-radius: 5px;
  margin-right: 10px;
  cursor: pointer;
}
.inCheck:hover {
  border: 1px solid #FF5000;

}

.inCheck:hover {
  border-color: #FF5000;
}


.top-container-right {
  width: 29%;
  height: auto;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 70%;
  top: 20px;
  border: 1px solid #d4d4d5;
  border-radius: 10px;
  padding: 10px;
}
.right-title {
  height: 30px;
  width: 95%;
  display: flex;
  align-items: flex-start;
}
.right-container {
  width: 95%;
  display: flex;
  align-items: flex-start;
  margin: 10px 0;
}
.entail-img:hover .emtail-img-p{
  display: block;
}
.emtail-img-p {
  position: absolute;
  cursor: pointer;
  display: none;
  top: 0px;
  right: 2px;
  margin: 0;
  font-size: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2px 5px;
  border-radius: 0 10px 0 10px;
}

.right-bt {
  width: 95%;
  height: 80px;
}
.bt-ti {
  height: 30%;
  margin-bottom: 15px;
}
.top-button {
  display: inline-block;
  width: 100%;
  height: 50%;
  background-color: #FF5000;
  color: white;
  border: 0;
  margin-bottom: 20px;
  font-size: 20px;
}
.top-button:hover {
  background-color: #ed320c;
}

.mid-container {
  width: 100%;
  height: 100px;

}
.goodsList {
  width: 69%;
  height: 100px;
  display: flex;
  align-items: center;
  padding-top: 20px;
}
.goodsList:first-child {
  border-top: 1px solid #d4d4d5;
}
.goodsImg {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.goodsImg img:hover {
  filter: brightness(80%);

}

.goodsInfo {
  width: 30%;
  height: 100px;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
}
.goodsInfo-top{
  display: flex;
  height: 45%;
  width: 100%;
  color: #1a1a1a;
  font-size: 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.goodsInfo-top:hover{
  color: #FF5000;
}

.goodsInfo-mid {
  width: 100%;
  height: 25%;
  color: #737373;
  display: flex;
  align-items: center;
}
.goodsInfo-bt {
  width: 100%;
  height: 30%;
  color: #FF5000;
  display: flex;
  align-items: center;
}

.goodsPrice{
  width: 20%;
  height: 100px;
  display: flex;
  flex-direction: column;
}
.goodsPrice-con {
  width: 100%;
  height: 100%;
  padding-left: 100px;
  color: #FF5000;
}

.goodsNum{
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.label2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px #bebcbc solid;
  vertical-align: middle;
  font-size: 1em;
  color: #1a1a1a;
}

p {
  text-align: left;
}

.other {
  display: flex;
  width: 100%;
  justify-items: center;
  align-content: center;
  margin-top: 300px;
}
</style>